<template>
  <Head title="售后申请详情 - Orange Tech" />
  <AdminLayout title="售后申请详情" subtitle="处理用户的售后申请">
    <div class="space-y-6">
      <!-- 页面头部 -->
      <div class="bg-white rounded-2xl p-8 shadow-sm">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <Link 
              :href="route('admin.after-sales.index')"
              class="p-2 text-gray-400 hover:text-gray-600 rounded-xl hover:bg-gray-100 transition-colors"
            >
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
              </svg>
            </Link>
            <div>
              <h1 class="text-2xl font-light text-gray-900">
                售后申请 #{{ request.id }}
              </h1>
              <p class="text-gray-600 mt-1">处理用户的售后申请</p>
            </div>
          </div>
          
          <div class="flex items-center space-x-3">
            <span 
              :class="getStatusBadgeClass(request.status)"
              class="inline-flex items-center px-4 py-2 rounded-2xl text-sm font-medium"
            >
              {{ getStatusText(request.status) }}
            </span>
            <span 
              :class="getTypeBadgeClass(request.type)"
              class="inline-flex items-center px-4 py-2 rounded-2xl text-sm font-medium"
            >
              {{ getTypeText(request.type) }}
            </span>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧：申请信息 -->
        <div class="lg:col-span-2 space-y-6">
          <!-- 申请基本信息 -->
          <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              申请信息
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">申请类型</label>
                <p class="text-lg font-light text-gray-900">{{ getTypeText(request.type) }}</p>
              </div>
              <div class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">申请原因</label>
                <p class="text-lg font-light text-gray-900">{{ request.reason }}</p>
              </div>
              <div class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">申请金额</label>
                <p class="text-lg font-light text-gray-900">¥{{ request.requested_amount }}</p>
              </div>
              <div v-if="request.approved_amount" class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">批准金额</label>
                <p class="text-lg font-light text-gray-900">¥{{ request.approved_amount }}</p>
              </div>
              <div class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">申请时间</label>
                <p class="text-lg font-light text-gray-900">{{ formatDate(request.created_at) }}</p>
              </div>
              <div v-if="request.submitted_at" class="bg-gray-50 rounded-2xl p-4">
                <label class="block text-sm font-medium text-gray-600 mb-2">提交时间</label>
                <p class="text-lg font-light text-gray-900">{{ formatDate(request.submitted_at) }}</p>
              </div>
            </div>
            
            <div v-if="request.description" class="mt-6 bg-gray-50 rounded-2xl p-4">
              <label class="block text-sm font-medium text-gray-600 mb-2">详细说明</label>
              <p class="text-gray-900 whitespace-pre-wrap">{{ request.description }}</p>
            </div>
          </div>

          <!-- 订单信息 -->
          <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
              </svg>
              关联订单
            </h2>
            
            <div class="bg-gray-50 rounded-2xl p-6">
              <div class="flex items-center justify-between">
                <div class="space-y-2">
                  <p class="text-lg font-light text-gray-900">订单号：{{ request.order.order_number }}</p>
                  <p class="text-gray-600">订单状态：{{ getOrderStatusText(request.order.status) }}</p>
                  <p class="text-gray-600">订单金额：¥{{ request.order.total_amount }}</p>
                </div>
                <Link 
                  :href="route('admin.orders.show', request.order.order_number)"
                  class="px-6 py-3 text-sm font-medium text-white bg-gray-900 rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
                >
                  查看订单详情
                </Link>
              </div>
            </div>
          </div>

          <!-- 售后商品 -->
          <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
              </svg>
              售后商品
            </h2>
            
            <div class="space-y-4">
              <div 
                v-for="item in request.items" 
                :key="item.id"
                class="bg-gray-50 rounded-2xl p-6 hover:bg-gray-100 transition-colors"
              >
                <div class="flex items-start space-x-6">
                  <img 
                    :src="item.order_item.product.image || '/images/product-placeholder.svg'"
                    :alt="item.order_item.product.name"
                    class="h-20 w-20 rounded-2xl object-cover border border-gray-200"
                  >
                  
                  <div class="flex-1">
                    <h3 class="text-lg font-light text-gray-900 mb-2">{{ item.order_item.product.name }}</h3>
                    <p v-if="item.order_item.variant" class="text-gray-600 mb-4">
                      规格：{{ item.order_item.variant.name }}
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-1 gap-4">
                      <div class="bg-white rounded-xl p-3">
                        <span class="text-sm font-medium text-gray-600">售后数量</span>
                        <p class="text-lg font-light text-gray-900">{{ item.quantity }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 凭证图片 -->
          <div v-if="request.images && request.images.length > 0" class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              凭证图片
            </h2>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
              <div 
                v-for="(image, index) in request.images" 
                :key="index"
                class="relative group cursor-pointer"
                @click="openImageModal(image)"
              >
                <img 
                  :src="getImageUrl(image)" 
                  :alt="`凭证图片 ${index + 1}`"
                  class="h-32 w-full object-cover rounded-2xl border border-gray-200 hover:border-gray-400 transition-colors"
                >
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all rounded-2xl flex items-center justify-center">
                  <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

          <!-- 处理记录 -->
          <div v-if="request.approvals && request.approvals.length > 0" class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
              </svg>
              处理记录
            </h2>
            
            <div class="space-y-4">
              <div 
                v-for="approval in request.approvals" 
                :key="approval.id"
                class="bg-gray-50 rounded-2xl p-6 border-l-4 border-gray-900"
              >
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-lg font-light text-gray-900">{{ getApprovalActionText(approval.action) }}</p>
                    <p v-if="approval.comment" class="text-gray-600 mt-2">{{ approval.comment }}</p>
                  </div>
                  <div class="text-right">
                    <p class="text-sm font-medium text-gray-900">{{ approval.admin?.name || '系统' }}</p>
                    <p class="text-sm text-gray-500">{{ formatDate(approval.created_at) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 物流信息 -->
          <div v-if="request.logistics && request.logistics.length > 0" class="bg-white rounded-2xl p-8 shadow-sm">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
              </svg>
              物流信息
            </h2>
            
            <div class="space-y-6">
              <!-- 用户寄回物流 -->
              <div v-if="userLogistics.length > 0">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                  用户寄回物流
                  <span class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">{{ userLogistics.length }}</span>
                </h3>
                <div class="space-y-4">
                  <div 
                    v-for="logistic in userLogistics" 
                    :key="logistic.id"
                    class="bg-blue-50 rounded-2xl p-6 border-l-4 border-blue-500"
                  >
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">物流公司</label>
                        <p class="text-lg font-light text-gray-900">{{ logistic.company }}</p>
                      </div>
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">运单号</label>
                        <p class="text-lg font-light text-gray-900 font-mono">{{ logistic.tracking_number }}</p>
                      </div>
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">发货时间</label>
                        <p class="text-lg font-light text-gray-900">{{ formatDate(logistic.sent_at) }}</p>
                      </div>
                      <div v-if="logistic.expected_delivery_at" class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">预计送达</label>
                        <p class="text-lg font-light text-gray-900">{{ formatDate(logistic.expected_delivery_at) }}</p>
                      </div>
                    </div>
                    <div v-if="logistic.note" class="mt-4 bg-white rounded-xl p-4">
                      <label class="block text-sm font-medium text-gray-600 mb-2">备注</label>
                      <p class="text-gray-900">{{ logistic.note }}</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 商家寄出物流 -->
              <div v-if="adminLogistics.length > 0">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  商家寄出物流
                  <span class="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">{{ adminLogistics.length }}</span>
                </h3>
                <div class="space-y-4">
                  <div 
                    v-for="logistic in adminLogistics" 
                    :key="logistic.id"
                    class="bg-green-50 rounded-2xl p-6 border-l-4 border-green-500"
                  >
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">物流公司</label>
                        <p class="text-lg font-light text-gray-900">{{ logistic.company }}</p>
                      </div>
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">运单号</label>
                        <p class="text-lg font-light text-gray-900 font-mono">{{ logistic.tracking_number }}</p>
                      </div>
                      <div class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">发货时间</label>
                        <p class="text-lg font-light text-gray-900">{{ formatDate(logistic.sent_at) }}</p>
                      </div>
                      <div v-if="logistic.expected_delivery_at" class="bg-white rounded-xl p-4">
                        <label class="block text-sm font-medium text-gray-600 mb-2">预计送达</label>
                        <p class="text-lg font-light text-gray-900">{{ formatDate(logistic.expected_delivery_at) }}</p>
                      </div>
                    </div>
                    <div v-if="logistic.note" class="mt-4 bg-white rounded-xl p-4">
                      <label class="block text-sm font-medium text-gray-600 mb-2">备注</label>
                      <p class="text-gray-900">{{ logistic.note }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：操作面板 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-2xl p-8 shadow-sm sticky top-8">
            <h2 class="text-xl font-light text-gray-900 mb-6 flex items-center">
              <svg class="w-6 h-6 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              操作面板
            </h2>
            
            <!-- 当前状态显示 -->
            <div class="mb-8 p-6 bg-gray-50 rounded-2xl">
              <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">当前状态</h3>
                <span 
                  :class="getStatusBadgeClass(request.status)"
                  class="inline-flex items-center px-3 py-1 rounded-xl text-sm font-medium"
                >
                  {{ getStatusText(request.status) }}
                </span>
              </div>
              <p class="text-sm text-gray-600">{{ getStatusDescription(request.status) }}</p>
            </div>
            
            <!-- 审核操作 -->
            <div v-if="request.status === 'pending'" class="space-y-6">
              <div class="p-6 bg-blue-50 rounded-2xl border border-blue-200">
                <h3 class="text-lg font-medium text-blue-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  审核操作
                </h3>
                
                <div class="space-y-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">批准金额</label>
                    <div class="relative">
                      <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">¥</span>
                      <input 
                        type="number"
                        step="0.01"
                        :max="request.requested_amount"
                        v-model="approveForm.approved_amount"
                        class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      >
                    </div>
                    <p class="text-xs text-gray-500 mt-2">最大金额：¥{{ request.requested_amount }}</p>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">审核备注</label>
                    <textarea 
                      v-model="approveForm.admin_comment"
                      rows="3"
                      placeholder="请输入审核通过的原因..."
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
                    ></textarea>
                  </div>
                  
                  <div class="flex justify-center space-x-4">
                    <button 
                      @click="approveRequest"
                      :disabled="isProcessing"
                      class="px-8 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-50 transition-colors flex items-center justify-center font-medium"
                    >
                      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      {{ isProcessing ? '处理中...' : '通过审核' }}
                    </button>
                    <button 
                      @click="showRejectDialog = true"
                      class="px-8 py-3 border border-red-300 text-red-600 rounded-2xl hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors flex items-center justify-center font-medium"
                    >
                      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                      拒绝申请
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 处理操作 -->
            <div v-else-if="request.status === 'approved'" class="space-y-6">
              <div class="p-6 bg-indigo-50 rounded-2xl border border-indigo-200">
                <h3 class="text-lg font-medium text-indigo-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  开始处理
                </h3>
                <p class="text-sm text-indigo-700 mb-4">审核已通过，可以开始处理售后申请</p>
                <button 
                  @click="processRequest"
                  :disabled="isProcessing"
                  class="w-full px-6 py-3 bg-indigo-600 text-white rounded-2xl hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 transition-colors flex items-center justify-center"
                >
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  {{ isProcessing ? '处理中...' : '开始处理' }}
                </button>
              </div>
            </div>

            <!-- 换货流程操作 -->
            <div v-else-if="request.status === 'processing' && request.type === 'exchange'" class="space-y-6">
              <!-- 换货流程进度 -->
              <div class="p-6 bg-blue-50 rounded-2xl border border-blue-200">
                <h3 class="text-lg font-medium text-blue-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                  </svg>
                  换货流程
                </h3>
                
                <div class="space-y-3">
                  <div class="flex items-center">
                    <div :class="getExchangeStepClass('return_shipped')" class="w-6 h-6 rounded-full flex items-center justify-center mr-3">
                      <svg v-if="isExchangeStepCompleted('return_shipped')" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                      </svg>
                      <span v-else class="text-xs font-bold">{{ getExchangeStepNumber('return_shipped') }}</span>
                    </div>
                    <span :class="getExchangeStepTextClass('return_shipped')">用户已寄回</span>
                  </div>
                  
                  <div class="flex items-center">
                    <div :class="getExchangeStepClass('return_received')" class="w-6 h-6 rounded-full flex items-center justify-center mr-3">
                      <svg v-if="isExchangeStepCompleted('return_received')" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                      </svg>
                      <span v-else class="text-xs font-bold">{{ getExchangeStepNumber('return_received') }}</span>
                    </div>
                    <span :class="getExchangeStepTextClass('return_received')">商家已收货</span>
                    <button 
                      v-if="canConfirmReturnReceived"
                      @click="confirmReturnReceived"
                      :disabled="isProcessing"
                      class="ml-auto px-4 py-2 bg-gray-900 text-white text-sm rounded-xl hover:bg-gray-800 disabled:opacity-50"
                    >
                      确认收货
                    </button>
                  </div>
                  
                  <div class="flex items-center">
                    <div :class="getExchangeStepClass('new_sent')" class="w-6 h-6 rounded-full flex items-center justify-center mr-3">
                      <svg v-if="isExchangeStepCompleted('new_sent')" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                      </svg>
                      <span v-else class="text-xs font-bold">{{ getExchangeStepNumber('new_sent') }}</span>
                    </div>
                    <span :class="getExchangeStepTextClass('new_sent')">新商品已寄出</span>
                    <button 
                      v-if="canSendNewProduct"
                      @click="showSendNewProductForm = true"
                      :disabled="isProcessing"
                      class="ml-auto px-4 py-2 bg-gray-900 text-white text-sm rounded-xl hover:bg-gray-800 disabled:opacity-50"
                    >
                      寄出新商品
                    </button>
                  </div>
                  
                <div class="flex items-center">
                  <div :class="getExchangeStepClass('new_delivered')" class="w-6 h-6 rounded-full flex items-center justify-center mr-3">
                    <svg v-if="isExchangeStepCompleted('new_delivered')" class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    <span v-else class="text-xs font-bold">{{ getExchangeStepNumber('new_delivered') }}</span>
                  </div>
                  <span :class="getExchangeStepTextClass('new_delivered')">新商品已送达</span>
                  <!-- 超时提醒 -->
                  <div v-if="isNearTimeout" class="ml-auto flex items-center text-orange-600 text-sm">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
                    </svg>
                    {{ getTimeoutMessage() }}
                  </div>
                </div>
                </div>
                
                <!-- 完成换货按钮 -->
                <div v-if="canCompleteExchange" class="mt-6 pt-4 border-t border-gray-200">
                  <button 
                    @click="completeExchange"
                    :disabled="isProcessing"
                    class="w-full px-6 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-50 transition-colors flex items-center justify-center"
                  >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    {{ isProcessing ? '处理中...' : '完成换货' }}
                  </button>
                </div>
              </div>
            </div>

            <!-- 其他类型的完成操作 -->
            <div v-else-if="request.status === 'processing' && request.type !== 'exchange'" class="space-y-6">
              <div class="p-6 bg-green-50 rounded-2xl border border-green-200">
                <h3 class="text-lg font-medium text-green-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  完成处理
                </h3>
                <p class="text-sm text-green-700 mb-4">售后处理已完成，可以标记为完成</p>
                <button 
                  @click="completeRequest"
                  :disabled="isProcessing"
                  class="w-full px-6 py-3 bg-green-600 text-white rounded-2xl hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-colors flex items-center justify-center"
                >
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {{ isProcessing ? '处理中...' : '完成处理' }}
                </button>
              </div>
            </div>

            <!-- 寄出新商品表单 -->
            <div v-if="showSendNewProductForm" class="mt-8 pt-8 border-t border-gray-200">
              <div class="p-6 bg-gray-50 rounded-2xl border border-gray-200">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                  </svg>
                  寄出新商品
                </h3>
                
                <p class="text-sm text-gray-700 mb-4">
                  用户已寄回原商品，请填写寄出新商品的物流信息
                </p>
                
                <div class="space-y-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">物流公司</label>
                    <select 
                      v-model="sendNewProductForm.company"
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
                    >
                      <option value="">请选择物流公司</option>
                      <option 
                        v-for="company in logisticsCompanies" 
                        :key="company.id" 
                        :value="company.name"
                      >
                        {{ company.name }} ({{ company.code }})
                      </option>
                    </select>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">运单号</label>
                    <input 
                      type="text"
                      v-model="sendNewProductForm.tracking_number"
                      placeholder="请输入运单号"
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
                    >
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
                    <textarea 
                      v-model="sendNewProductForm.note"
                      rows="2"
                      placeholder="物流相关备注信息..."
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
                    ></textarea>
                  </div>
                  
                  <div class="flex space-x-3">
                    <button 
                      @click="sendNewProduct"
                      :disabled="isProcessing"
                      class="flex-1 px-6 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-50 transition-colors flex items-center justify-center"
                    >
                      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                      </svg>
                      {{ isProcessing ? '处理中...' : '寄出新商品' }}
                    </button>
                    
                    <button 
                      @click="showSendNewProductForm = false"
                      class="px-6 py-3 border border-gray-300 text-gray-700 rounded-2xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
                    >
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 添加物流信息 -->
            <div v-if="shouldShowAddLogisticsForm" class="mt-8 pt-8 border-t border-gray-200">
              <div class="p-6 bg-gray-50 rounded-2xl">
                <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                  </svg>
                  {{ getLogisticsFormTitle() }}
                </h3>
                
                <p class="text-sm text-gray-600 mb-4">
                  {{ getLogisticsFormDescription() }}
                </p>
                
                <div class="space-y-4">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">物流类型</label>
                    <select 
                      v-model="logisticsForm.type"
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    >
                      <option v-if="request.type === 'return'" value="return">退货物流</option>
                      <option v-if="request.type === 'exchange' && !hasUserReturnLogistics" value="exchange">换货物流</option>
                      <option v-if="request.type === 'exchange' && hasUserReturnLogistics" value="exchange">寄出新商品物流</option>
                    </select>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">物流公司</label>
                    <select 
                      v-model="logisticsForm.company"
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    >
                      <option value="">请选择物流公司</option>
                      <option 
                        v-for="company in logisticsCompanies" 
                        :key="company.id" 
                        :value="company.name"
                      >
                        {{ company.name }} ({{ company.code }})
                      </option>
                    </select>
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">运单号</label>
                    <input 
                      type="text"
                      v-model="logisticsForm.tracking_number"
                      placeholder="请输入运单号"
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    >
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
                    <textarea 
                      v-model="logisticsForm.note"
                      rows="2"
                      placeholder="物流相关备注信息..."
                      class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    ></textarea>
                  </div>
                  
                  <button 
                    @click="addLogistics"
                    :disabled="isProcessing"
                    class="w-full px-6 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 transition-colors flex items-center justify-center"
                  >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    {{ isProcessing ? '添加中...' : '添加物流信息' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 拒绝申请对话框 -->
      <div v-if="showRejectDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4">
          <h3 class="text-xl font-light text-gray-900 mb-6">拒绝申请</h3>
          
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-3">拒绝原因</label>
            <textarea 
              v-model="rejectForm.rejection_reason"
              rows="4"
              placeholder="请说明拒绝原因..."
              class="w-full px-4 py-3 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
            ></textarea>
          </div>
          
          <div class="flex justify-end space-x-3">
            <button 
              @click="showRejectDialog = false"
              class="px-6 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-2xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
            >
              取消
            </button>
            <button 
              @click="rejectRequest"
              :disabled="isProcessing || !rejectForm.rejection_reason"
              class="px-6 py-3 text-sm font-medium text-white bg-red-600 rounded-2xl hover:bg-red-700 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors"
            >
              确认拒绝
            </button>
          </div>
        </div>
      </div>

      <!-- 图片预览模态框 -->
      <div 
        v-if="showImageModal" 
        class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
        @click="closeImageModal"
      >
        <div class="max-w-4xl max-h-full p-4">
          <img 
            :src="modalImageUrl" 
            alt="凭证图片"
            class="max-w-full max-h-full object-contain rounded-2xl"
            @click.stop
          >
          <button 
            @click="closeImageModal"
            class="absolute top-4 right-4 text-white hover:text-gray-300 p-2 rounded-xl hover:bg-black hover:bg-opacity-20 transition-colors"
          >
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Link, router, Head } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { useNotification } from '@/composables/useNotification'

const { showError, showSuccess } = useNotification()

const props = defineProps({
  request: Object,
  logisticsCompanies: {
    type: Array,
    default: () => []
  }
})

const isProcessing = ref(false)
const showRejectDialog = ref(false)
const showImageModal = ref(false)
const modalImageUrl = ref('')

const approveForm = reactive({
  approved_amount: props.request.requested_amount,
  admin_comment: ''
})

const rejectForm = reactive({
  rejection_reason: ''
})

const logisticsForm = reactive({
  type: props.request.type === 'exchange' ? 'exchange' : 'return',
  company: '',
  tracking_number: '',
  note: ''
})

// 判断是否应该显示添加物流表单
const shouldShowAddLogisticsForm = computed(() => {
  // 只对已批准或处理中的非退款申请显示
  if (!['approved', 'processing'].includes(props.request.status) || props.request.type === 'refund') {
    return false
  }
  
  // 对于换货申请，只有在用户已寄回但管理员还未寄出新商品时显示
  if (props.request.type === 'exchange') {
    // 如果已经寄出新商品，不显示通用物流表单
    if (props.request.extended_status === 'new_sent' || props.request.extended_status === 'new_delivered') {
      return false
    }
    
    // 如果用户已寄回，但管理员还未寄出新商品，显示通用物流表单
    const hasUserReturnLogistics = props.request.logistics?.some(log => 
      log.submitted_by === 'user' && log.type === 'return'
    )
    return hasUserReturnLogistics && props.request.extended_status === 'return_received'
  }
  
  // 对于退货申请，如果没有物流信息就显示
  if (props.request.type === 'return') {
    return !props.request.logistics || props.request.logistics.length === 0
  }
  
  return false
})

// 获取物流表单标题
const getLogisticsFormTitle = () => {
  if (props.request.type === 'exchange') {
    // 检查是否已经有用户寄回的物流信息
    const hasUserReturnLogistics = props.request.logistics && props.request.logistics.some(log => log.type === 'exchange')
    if (hasUserReturnLogistics) {
      return '添加寄出新商品物流信息'
    } else {
      return '添加换货物流信息'
    }
  }
  return '添加退货物流信息'
}

// 获取物流表单描述
const getLogisticsFormDescription = () => {
  if (props.request.type === 'exchange') {
    // 检查是否已经有用户寄回的物流信息
    const hasUserReturnLogistics = props.request.logistics && props.request.logistics.some(log => log.type === 'exchange')
    if (hasUserReturnLogistics) {
      return '用户已寄回原商品，请填写寄出新商品的物流信息'
    } else {
      return '用户已寄回商品，请填写换货物流信息'
    }
  }
  return '用户已寄回商品，请确认收货后处理退款'
}

// 检查是否有用户寄回的物流信息
const hasUserReturnLogistics = computed(() => {
  return props.request.logistics && props.request.logistics.some(log => log.type === 'exchange')
})

// 用户物流（通过submitted_by字段区分）
const userLogistics = computed(() => {
  return props.request.logistics?.filter(logistic => logistic.submitted_by === 'user') || []
})

// 后台物流（管理员寄出的物流）
const adminLogistics = computed(() => {
  return props.request.logistics?.filter(logistic => logistic.submitted_by === 'admin') || []
})

const getStatusBadgeClass = (status) => {
  const classes = {
    pending: 'bg-orange-100 text-orange-800',
    approved: 'bg-blue-100 text-blue-800',
    rejected: 'bg-red-100 text-red-800',
    processing: 'bg-indigo-100 text-indigo-800',
    completed: 'bg-green-100 text-green-800',
    cancelled: 'bg-gray-100 text-gray-800'
  }
  return classes[status] || 'bg-gray-100 text-gray-800'
}

const getTypeBadgeClass = (type) => {
  const classes = {
    return: 'bg-purple-100 text-purple-800',
    refund: 'bg-yellow-100 text-yellow-800',
    exchange: 'bg-green-100 text-green-800'
  }
  return classes[type] || 'bg-gray-100 text-gray-800'
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    approved: '已批准',
    rejected: '已拒绝',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 获取状态描述
const getStatusDescription = (status) => {
  const descriptions = {
    pending: '等待管理员审核，请耐心等待',
    approved: '审核已通过，可以开始处理售后',
    rejected: '申请已被拒绝，如有疑问请联系客服',
    processing: '正在处理中，请耐心等待',
    completed: '售后处理已完成',
    cancelled: '申请已被取消'
  }
  return descriptions[status] || '未知状态'
}

const getTypeText = (type) => {
  const typeMap = {
    return: '退货',
    refund: '退款',
    exchange: '换货'
  }
  return typeMap[type] || type
}

const getOrderStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    shipped: '已发货',
    delivered: '已送达',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

// 获取处理记录动作文本
const getApprovalActionText = (action) => {
  const actionMap = {
    'approve': '审核通过',
    'reject': '审核拒绝',
    'process': '开始处理',
    'complete': '处理完成',
    'cancel': '取消申请',
    'refund': '退款处理',
    'return': '退货处理',
    'exchange': '换货处理'
  }
  return actionMap[action] || action
}


const getImageUrl = (imagePath) => {
  return imagePath.startsWith('http') ? imagePath : `/storage/${imagePath}`
}

const openImageModal = (imagePath) => {
  modalImageUrl.value = getImageUrl(imagePath)
  showImageModal.value = true
}

const closeImageModal = () => {
  showImageModal.value = false
  modalImageUrl.value = ''
}

const approveRequest = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.approve', props.request.id), approveForm, {
    onSuccess: () => {
      isProcessing.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

const rejectRequest = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.reject', props.request.id), rejectForm, {
    onSuccess: () => {
      isProcessing.value = false
      showRejectDialog.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

const processRequest = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.process', props.request.id), {}, {
    onSuccess: () => {
      isProcessing.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

const completeRequest = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.complete', props.request.id), {}, {
    onSuccess: () => {
      isProcessing.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

const addLogistics = () => {
  if (!logisticsForm.company || !logisticsForm.tracking_number) {
    showError('操作失败', '请填写物流公司和运单号')
    return
  }
  
  isProcessing.value = true
  
  router.post(route('admin.after-sales.logistics', props.request.id), logisticsForm, {
    onSuccess: () => {
      isProcessing.value = false
      // 重置表单
      logisticsForm.company = ''
      logisticsForm.tracking_number = ''
      logisticsForm.note = ''
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

const formatDate = (date) => {
  if (!date) return '-'
  const dateObj = new Date(date)
  if (isNaN(dateObj.getTime())) return '-'
  return dateObj.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 换货流程相关方法
const showSendNewProductForm = ref(false)
const sendNewProductForm = reactive({
  tracking_number: '',
  company: '',
  note: ''
})

// 换货流程步骤
const exchangeSteps = ['return_shipped', 'return_received', 'new_sent', 'new_delivered']

// 检查换货步骤是否完成
const isExchangeStepCompleted = (step) => {
  if (!props.request.extended_status) return false
  const currentStepIndex = exchangeSteps.indexOf(props.request.extended_status)
  const stepIndex = exchangeSteps.indexOf(step)
  return currentStepIndex >= stepIndex
}

// 获取换货步骤样式
const getExchangeStepClass = (step) => {
  if (isExchangeStepCompleted(step)) {
    return 'bg-gray-900 text-white'
  } else if (props.request.extended_status === step) {
    return 'bg-gray-700 text-white'
  } else {
    return 'bg-gray-300 text-gray-600'
  }
}

// 获取换货步骤文本样式
const getExchangeStepTextClass = (step) => {
  if (isExchangeStepCompleted(step)) {
    return 'text-gray-900 font-medium'
  } else if (props.request.extended_status === step) {
    return 'text-gray-700 font-medium'
  } else {
    return 'text-gray-500'
  }
}

// 获取换货步骤编号
const getExchangeStepNumber = (step) => {
  return exchangeSteps.indexOf(step) + 1
}

// 检查是否可以确认收货
const canConfirmReturnReceived = computed(() => {
  return props.request.extended_status === 'return_shipped' || 
         (props.request.extended_status === 'return_received' && !isExchangeStepCompleted('return_received'))
})

// 检查是否可以寄出新商品
const canSendNewProduct = computed(() => {
  return props.request.extended_status === 'return_received' || 
         (props.request.extended_status === 'new_sent' && !isExchangeStepCompleted('new_sent'))
})


// 检查是否可以完成换货
const canCompleteExchange = computed(() => {
  return props.request.extended_status === 'new_delivered'
})

// 检查是否接近超时（使用后端数据）
const isNearTimeout = computed(() => {
  return props.request.is_near_timeout || false
})

// 获取超时提醒消息（使用后端数据）
const getTimeoutMessage = () => {
  return props.request.timeout_message || ''
}

// 确认收到用户寄回的商品
const confirmReturnReceived = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.confirm-return', props.request.id), {}, {
    onSuccess: () => {
      isProcessing.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}

// 寄出新商品
const sendNewProduct = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.send-new', props.request.id), sendNewProductForm, {
    onSuccess: () => {
      isProcessing.value = false
      showSendNewProductForm.value = false
      // 重置表单
      sendNewProductForm.tracking_number = ''
      sendNewProductForm.company = ''
      sendNewProductForm.note = ''
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}


// 完成换货
const completeExchange = () => {
  isProcessing.value = true
  
  router.post(route('admin.after-sales.complete-exchange', props.request.id), {}, {
    onSuccess: () => {
      isProcessing.value = false
    },
    onError: () => {
      isProcessing.value = false
    }
  })
}
</script>
